<template>
	<view class="cart-wrap">
		<!-- 这个条件判断购物车数组goodsOfCart是否存在且至少包含一个元素。只有当购物车不为空时，才会渲染内部的商品列表。 -->
		<view v-if="goodsOfCart && goodsOfCart.length">
			<!-- ：这是一个循环指令，用于遍历购物车数组goodsOfCart，每次循环创建一个商品视图。 -->
			<view v-for="goods in goodsOfCart" :key="goods.id" class='goods'>
				<view>
					<image :src="goods.img" mode="aspectFill" class="goods-img"></image>
				</view>
				
				<view class="goods-info">
					<!-- 动态显示商品的名称。 -->
					<view class="goods-name">
						{{ goods.name }}
					</view>
					<!-- 动态显示商品的详情描述。 -->
					<view class="goods-details">
						{{ goods.details}}
					</view>
					<view class="goods-price">
						<view>
							<text class="unit">￥</text><text class="price-text">{{ goods.price }}</text><text
								class="price-append">起</text>
						</view>
						<!--点击时 调用delGoods方法，并将当前商品对象goods作为参数传入，以便从购物车中移除。 -->
						<image src="../../static/gouwuche.png" mode="aspectFill" class="gwc" @click="delGoods(goods)">
						</image>
					</view>
				</view>
			</view>
		</view>
		
		<view v-else class="no-goods">
			购物车空空如也
		</view>
		
		<view class='total-wrap'>
			<view class="total-body">
				<view>总计：<text class="price">{{ totalPrice }}</text>元</view>
				<!-- 显示购物车中所有商品的总价，并提供一个支付按钮。如果总价（totalPrice）为0，则支付按钮被禁用。 -->
				<view class="to-buy"><button :disabled="!totalPrice" size="mini" type="warn">支付</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			// 使用mapGetters从Vuex的store中获取goods和goodsOfCart。
			...mapGetters(["goods", "goodsOfCart"]),
			// totalPrice计算所有商品的价格总和。
			totalPrice() {
				return this.goodsOfCart.reduce((total, item) => {
					return total + +item.price
				}, 0)
			}
		},
		methods: {
			// delGoods方法：接收一个商品对象作为参数，通过Vuex的dispatch方法调用removeGoods action来从购物车中移除该商品。
			delGoods(goods) {
				const vm = this
				vm.$store.dispatch("removeGoods", goods)
			}

		}
	}
</script>

<style>
	.goods {
		background-color: #ffffff;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.goods-detair {
		line-height: 1.6;
		font-size: 24rpx;
		color: #666666;
	}

	.goods .goods-name {
		line-height: 2;
		font-size: 32rpx;
		font-weight: bold;
	}

	.goods .goods-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.goods-price {
		margin-top: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.unit {
		color: #c49446;
	}

	.price-text {
		font-size: 36rpx;
		color: #de2b2b;
	}

	.price-append {
		font-size: 24rpx;
		margin-left: 8rpx;
		color: #333333;
	}

	.gwc {
		width: 60rpx;
		height: 60rpx;
	}

	.total-wrap {
		width: 100%;
		margin: 0;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom);
		box-shadow: rgba(157, 165, 193, 0.2) 0px 2rpx 20rpx 2rpx;

		.total-body {
			color: #666666;
			font-size: 24rpx;
			padding: 20rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.to-buy {
				margin-left: 40rpx;
			}

			.price {
				font-size: 40rpx;
				font-weight: bold;
				color: #FF3221;
				margin-right: 8rpx;
			}
		}
	}

	.no-goods {
		margin: 0;
		text-align: center;
		font-size: 32rpx;
		line-height: 10;
		color: #666666;
	}
</style>